<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>收货地址</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>收货地址管理</div>
                </div>

                <div class="list-address">
                    <div class="li" v-for="(item, index) in addressList" :key="index">
                        <div class="tit">
                            <div>{{ item.real_name }}</div>
                            <div v-if="item.is_default">默认地址</div>
                        </div>
                        <div class="li-name">
                            <div>收货人：</div>
                            <div>{{ item.real_name }}</div>
                        </div>
                        <div class="li-name">
                            <div>地址：</div>
                            <div>
                                {{ item.province }}{{ item.city }}{{ item.district
                                }}{{ item.detail }}
                            </div>
                        </div>
                        <div class="li-name">
                            <div>手机：</div>
                            <div>{{ item.phone }}</div>
                        </div>
                        <div class="edit">
                            <div @click="radioChange(index)">设为默认地址</div>
                            <!--                            <div class="td-fbc" @click="delAddress(index)">-->
                            <div class="td-fbc" @click="openDel(index)">
                                <img :src="$global.Image.icon_delete" />
                                <span>删除</span>
                            </div>
                            <div class="td-fbc" @click="showEditDialog(item.id)">
                                <img :src="$global.Image.icon_edit" />
                                <span>编辑</span>
                            </div>
                        </div>
                    </div>
                    <div class="nodata" v-if="addressList.length == 0">
                        <img :src="$global.Image.noAddress" />
                    </div>
                </div>
                <div style="height:39px"></div>
                <div class="add-address" @click="showAddDialog">新增收货地址</div>
                <v-addressDialog ref="addressDialog" :addressType="addressType"></v-addressDialog>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import AddressDialog from "@components/AddressDialog";
import {
    getAddressList,
    getAddressRemove,
    getAddressDefaultSet,
} from "@api/user";

export default {
    components: {
        leftNavBar,
        "v-addressDialog": AddressDialog,
    },
    data() {
        return {
            active: 5,
            page: 1,
            limit: 20,
            addressList: [],
            addressType: "",
        };
    },
    mounted() {
        this.AddressList();
    },
    methods: {
        /**
         * 获取地址列表
         *
         */
        AddressList() {
            let that = this;
            getAddressList({ page: that.page, limit: that.limit }).then(
                (res) => {
                    that.addressList = res.data;
                }
            );
        },
        //删除窗口
        openDel(index) {
            this.$confirm("确定要删除此地址吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delAddress(index);
            });
        },
        /**
         * 删除地址
         */
        delAddress(index) {
            let that = this;
            let address = this.addressList[index];
            let id = address.id;
            getAddressRemove(id).then(function () {
                that.$dialog.toast({
                    mes: "删除成功!",
                    callback: () => {
                        that.addressList.splice(index, 1);
                        that.$set(that, "addressList", that.addressList);
                    },
                });
            });
        },
        /**
         * 设置默认地址
         */
        radioChange(index) {
            let that = this,
                address = this.addressList[index],
                id = address.id;
            getAddressDefaultSet(id).then(function () {
                for (var i = 0, len = that.addressList.length; i < len; i++) {
                    if (i === index) that.addressList[i].is_default = 1;
                    else that.addressList[i].is_default = 0;
                }
                that.$set(that, "addressList", that.addressList);
            });
        },
        /**
         * 新增地址
         */
        showAddDialog() {
            this.addressType = "新增";
            this.$refs["addressDialog"].showAddDialog(() => {
                this.AddressList();
            });
        },
        /**
         * 编辑地址
         */
        showEditDialog(id) {
            this.addressType = "编辑";
            if (!id) return false;
            this.$refs["addressDialog"].showEditDialog(id, () => {
                this.AddressList();
            });
        },
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }

        .add-address {
            width: 111px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background: $color;
            font-size: 14px;
            color: #fff;
            margin-bottom: 16px;
            font-weight: 600;
            border-radius: 3px;
            cursor: pointer;
        }

        .list-address {
            .li {
                border: 1px solid #EFC2C1;
                width: 100%;
                padding: 20px 0;
                margin-top: 24px;

                .tit {
                    display: flex;
                    height: 24px;
                    align-items: center;
                    padding: 0 0 15px 28px;

                    > div:nth-of-type(1) {
                        font-size: 18px;
                        color: #666666;
                        font-weight: 600;
                    }

                    > div:nth-of-type(2) {
                        font-size: 14px;
                        color: $color;
                        padding-left: 20px;
                    }
                }

                .li-name {
                    display: flex;
                    height: 19px;
                    align-items: center;
                    padding-left: 28px;
                    padding-bottom: 13px;

                    > div:nth-of-type(1) {
                        font-size: 14px;
                        color: #999999;
                        min-width: 60px;
                        text-align: right;
                    }

                    > div:nth-of-type(2) {
                        padding-left: 16px;
                        font-size: 14px;
                        color: #333333;
                    }
                }

                .li-name:nth-of-type(5) {
                    padding-bottom: 0;
                }

                .edit {
                    display: flex;
                    height: 22px;
                    align-items: center;
                    justify-content: flex-end;
                    padding-right: 39px;

                    img {
                        display: block;
                        width: 20px;
                        height: 20px;
                        object-fit: contain;
                        cursor: pointer;
                        margin-right: 8px;
                    }

                    div {
                        font-size: 14px;
                        color: #014a97;
                        padding-left: 29px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
